<template>
  <view class="u-p-b-5">
    <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 20rpx' }"
      :head-style="{ padding: '28rpx 30rpx 10rpx' }" :head-border-bottom="false">
      <view slot="head">
        <view class="card-row u-flex head">
          <u-section title="培训情况" color="#014833" font-size="32" :right="showRight" @click="goPage"></u-section>
        </view>
      </view>
      <view slot="body">
        <view class="card-row u-p-b-28">
          <view class="w-100p">
            <view>
              <view class="body-cont" v-for="item in personList" :key="item.id">
                <view class="u-flex alarm">
                  <view class="alarm-body">
                    <view class="alarm-tit u-flex">
                      <h4>{{ item.num }}</h4>
                      <text>{{ item.unit }}</text>
                    </view>
                    <view class="alarm-txt">{{ item.name }}</view>
                  </view>
                </view>
              </view>

              <view class="body-cont " style="width: 99%;">
                <view class="u-flex alarm">
                  <view class="alarm-body">
                    <view class="alarm-tit u-flex">
                      <h4>{{ dataObj.needPrePeopleCount }} / {{ dataObj.curPrePeopleCount }} / {{ dataObj.prePeopleCount }}</h4>
                      <text>人</text>
                    </view>
                    <view class="alarm-txt">岗前培训（需培训/培训中/已完成）</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-card>
  </view>
</template>
<script>
export default {
  watch: {
    'customerNo': {
      immediate: true,
      handler: function (newval) {

        if (newval) {
          this.getServerData();
        }
      },
    },
  },
  props: {
    customerNo: {
      type: String,
      default: ''
    },
    showRight: {
      type: Boolean,
      default: true
    },
  },
  data () {
    return {
      dataObj:{},
      personList: [
        {
          unit: '人',
          num: '',
          name: '组织培训'
        },
        {
          unit: '人',
          num: '',
          name: '培训总人数'
        }
      ],
    }
  },
  methods: {
    getServerData () {
      this.$get(`/train/trainStatistics?customerNo=${this.customerNo}`).then(result => {
        if (result.body) {
          this.dataObj=result.body[0]
          const { trainCount, peopleCount } = result.body[0]
          this.personList[0].num = trainCount
          this.personList[1].num = peopleCount
        }
      })
    },
    goPage () {
      uni.navigateTo({
        url: `/pages/practitioner/training/index?customerNo=${this.customerNo}`
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body {
  &-cont {
    box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
    border-radius: 12rpx;
    width: 48%;
    display: inline-block;
    margin-top: 20rpx;

    .alarm {
      justify-content: space-around;
      padding: 26rpx;
      font-size: 26rpx;

      &-tit {
        justify-content: center;

        h4 {
          font-size: 40rpx;
          margin-right: 10rpx;
          color: #333;
        }
      }

      &-txt {
        white-space: nowrap;
      }
    }

    &:nth-child(2n) {
      margin-left: 20rpx;
    }
  }
}
</style>